<template>
   <div class="container">
      <div v-if="coupon.length>0" class="box"  >
      <div style="margin: 10px;overflow: hidden;position: relative;" v-for="(item,index) in coupon" :key="index">
           <masker style="border-radius: 2px;">
               <div class="m-img" ></div>
               <div slot="content" class="m-title">
                 {{item.name}} <span class="text">{{item.shopName}}</span>
                 <br/>
                 <span class="m-time">到期时间{{item.expirationDate}}</span>
               </div>
          </masker>
          <span class="txt">{{item.stateName}}</span>
      </div>
        
       </div>
      <div class="boxs" v-else>您暂无可用优惠卷哟，请前去各大店铺领取优惠卷。</div>
   </div>
</template>
<script>
 import axios from '@/api/request'
   import {Masker} from "vux";
export default {
   data() {
      return {
          coupon:[]
      }
    },
    components: {
       Masker
     },
    mounted(){
      this.getcount()
    },
      methods:{
        getcount(){
          axios('/device/couponUser/getMyInAll','post',{userId:this.$route.query.userId}).then(res=>{
              if(res.data.code==1000){
                console.log(res)
                this.coupon = res.data.data
              }
            })  
        },
      }
    
}
</script>
<style scoped>
.txt{
     transform: rotate(33deg);
    -webkit-transform: rotate(33deg);
    height: 80px;
    width: 24px;
    position: absolute;
    display: block;
    bottom: -12px;
    color: #fff;
    right: 3px;
    padding-top: 21px;
    text-align: center;
    background: #1c66b1;
}
.m-img {
  padding-bottom: 33%;
  display: block;
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  border-radius: 2px;
}
.box{
  position: relative;
 
}
.boxs{
  text-align: center;
   padding-top:20px;
}
.m-title {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
 .text{
   color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  font-weight: 500;
  font-size: 12px;
  transform: translateY(-50%);
 }
.m-time {
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  display: inline-block;
  margin-top: 5px;
}
</style>

